<template>
  <div class="page-panel">
    基础表单
    <form-generator @on-submit="onSubmit" ref="form" :settings="formSettings"></form-generator>
    <el-button type="primary" @click="startSubmit">立即创建</el-button>
  </div>
</template>

<script>
import FormGenerator from "../../components/FormGenerator/FormGenerator";
import HelloWorld from "../../components/HelloWorld.vue";

export default {
  name: "base-form",
  data() {
    let self=this;
    return {
      formSettings: {
        value: {
          text: "123",
          textarea: "456",
          select: "2"
        },
        props: {
          "label-width": "100px"
        },
        buttons: {
          hidden: true
        },
        layouts: [
          {
            key: "div",
            name: "div",
            type: "div",
            controls: [
              {
                key: "text",
                name: "text",
                type: "text",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "textarea",
                name: "textarea",
                type: "textarea",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "select",
                name: "select",
                type: "select",
                itemProps: {},
                controlProps: {},
                options: [
                  { label: "选项一", value: "1" },
                  { label: "选项二", value: "2" },
                  { label: "选项三", value: "3" }
                ]
              },
              {
                key: "select1",
                name: "select1",
                type: "select",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "component",
                name: "component",
                type: "component",
                component: HelloWorld,
                itemProps: {callback(ev){
                  self.startSubmit(ev);
                }},
                controlProps: {}
              },
              {
                key: "date",
                name: "date",
                type: "date",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "time",
                name: "time",
                type: "time",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "switch",
                name: "switch",
                type: "switch",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "checkbox-group",
                name: "checkbox-group",
                type: "checkbox-group",
                itemProps: {},
                controlProps: {}
              },
              {
                key: "radio-group",
                name: "radio-group",
                type: "radio-group",
                itemProps: {},
                controlProps: {}
              }
            ]
          },
          {
            key: "card",
            name: "card",
            type: "card"
          },
          {
            key: "tabs",
            name: "tabs",
            type: "tabs",
            props: {
              value: "tab-1"
            },
            layouts: [
              {
                key: "tab-1",
                name: "tab-1",
                type: "tab-pane"
              },
              {
                key: "tab-2",
                name: "tab-2",
                type: "tab-pane"
              }
            ]
          }
        ],
        rules: {
          text: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
          ],
          region: [
            { required: true, message: "请选择活动区域", trigger: "change" }
          ],
          date1: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change"
            }
          ],
          date2: [
            {
              type: "date",
              required: true,
              message: "请选择时间",
              trigger: "change"
            }
          ],
          type: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个活动性质",
              trigger: "change"
            }
          ],
          resource: [
            { required: true, message: "请选择活动资源", trigger: "change" }
          ],
          desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
        }
      }
    };
  },
  methods: {
    onSubmit(ev) {
      console.log(ev);
    },
    startSubmit(ev) {
      let vals = this.$refs["form"].formSubmit();
    }
  },
  components: {
    FormGenerator
  }
};
</script>

<style>
</style>
